<template>
  <div class="home">
    <el-header>
      <h3>
        <img src="../assets/images/icon1.png" />
        <img src="../assets/images/icon2.png" />
        智慧社区管理平台
      </h3>
      <div>
        <i class="el-icon-s-operation" @click="toggleCollapse"></i>
      </div>

      <div class="userBox" style="color: aquamarine">
        <i class="el-icon-bell" @click="message"></i>
        <span class="right">{{ user.username }}</span>
        <span class="right"
          ><img class="toperImg" src="../assets/images/头像.png" alt=""
        /></span>
        <span @click="set" class="backLogin">退出</span>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '48px' : '230px'">
        <el-menu
          default-active="/home/PlatformHomepage"
          class="el-menu-vertical-demo"
          background-color="#293050"
          text-color="rgb(225, 221, 221)"
          active-text-color="#39bdad"
          :collapse="isCollapse"
          :router="true"
        >

        <!-- 第一层（有子级的） -->
          <div v-for="v in userMenus" :key="v.id">
            <el-submenu :index="v.icon" v-if="v.children">
              <template slot="title">
                <i :class="v.icon"></i>
                <span>{{ v.title }}</span>
              </template>
              <!-- 第二层 -->
              <div v-for="v2 in v.children" :key="v2.id">
                <!-- 第二层（无子级的） -->
                <el-menu-item v-if="!v2.children" :index="v2.href">
                  {{ v2.title }}
                </el-menu-item>

                <!-- 第二层（有子级的） -->
                <el-submenu v-else :index="v2.title">
                  <template slot="title">{{ v2.title }}</template>

                  <!-- 第三层 -->
                  <el-menu-item
                    v-for="v3 in v2.children"
                    :index="v3.href"
                    :key="v3.id"
                  >
                    {{ v3.title }}
                  </el-menu-item>
                </el-submenu>
              </div>
            </el-submenu>

            <!-- 第一层（没有子级的） -->
            <el-menu-item v-else :index="v.href">
              <i :class="v.icon"></i>
              <span slot="title">{{ v.title }}</span>
            </el-menu-item>
          </div>

        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      user: '',
      userMenus: [],
      isCollapse: false,
    };
  },
  methods: {
    onSearch: function () {},
    message: function () {},
    set: function () {
      this.$router.push('/');
      sessionStorage.clear();
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
  mounted: function () {
    const user = sessionStorage.getItem('user');
    this.userMenus = JSON.parse(sessionStorage.getItem('userMenus')) || {};
    if (user) {
      this.user = JSON.parse(user);
    } else {
      this.$message.error('需要重新登录');
      this.$router.push('/');
    }
  },
};
</script>
<style scoped lang="less">
.home {
  height: 100%;
  .el-header {
    background: #232348;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 3px;
    // border-top: 2px #191938 solid;
    h3 {
      color: #ffffff;
      font: 100;
      width: 240px;
      height: 60px;
      line-height: 60px;
      background: #232348;
    }
  }
  .el-container {
    height: calc(100% - 60px);
  }
}

.el-icon-s-operation {
  color: aquamarine;
  position: absolute;
  left: 200px;
  top: 20px;
  font-size: 20px;
}

.right {
  margin: 5px;
  .toperImg {
    width: 35px;
    height: 35px;
  }
}
.el-menu {
  border-right: none;
  height: 100%;
}
.el-aside {
  height: 100%;
  background: #191938;

  .el-menu-item span {
    font-size: 18px;
  }
}
.el-main {
  height: 100%;
  background: #eceded;
  font-size: 18px;
  padding: 0;
}
.el-input {
  width: 200px;
  margin: 0px 0px 0px 55px;
  position: absolute;
  top: 10px;
  left: 240px;
}
.el-icon-search {
  position: absolute;
  top: 20px;
  left: 470px;
  font-weight: 900;
  z-index: 4;
  color: rgb(21, 194, 136);
}
.backLogin,
.el-icon-search,
.el-icon-s-operation:hover {
  cursor: pointer;
}
.userBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
